<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            $.ajax({
                url: 'http://localhost:8080/myweb/list',
                dataType: 'json',
                success: function(result){
                    if(result.status == 200){
                        let users = result.data
                        for(var i in users){
                           let user = users[i]
                           let tr = $('<tr>')
                                        .append($('<td>').text(Number(i) + 1))
                                        .append($('<td>').text(user.name))
                                        .append($('<td>').text(user.age))
                                        .append($('<td>').text(user.sex))
                                        .append($('<td>').text(user.height))
                                        .append($('<td>').text(user.birthday))
                                        .append($('<td>').append($('<button>').text('删除').click(function(){
                                            deleteUser(user.id)
                                        })))
                            $('#tb').append(tr)
                        }
                    }
                }
            })
        })

        // 删除用户
        function deleteUser(id){
            console.log(id)
            $.ajax({
                url: 'http://localhost:8080/myweb/deleteUser',
                data: { id },
                dataType: 'json',
                success: function(result){
                    if(result.status == 200){
                        alert(result.msg)
                        location.reload() // 刷新页面
                    }
                }
            })
        }
    </script>
</head>
<body>
    <h2>用户列表</h2>
<!--    table>(thead>tr>th*8)+tbody>tr>td*8-->
    <table border="1px" cellspacing="0" width="700px">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>身高</th>
                <th>出生日期</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb" align="center">

        </tbody>
    </table>

</body>
</html>